<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            width: 100px;
            height: 50px;
            line-height: 50px;
            color: cornflowerblue;
            background-color: darkgreen;

        }
    </style>
</head>

<body>
    <button>点击显示当前时间：</button> <span>当前时间为：xxxxxx</span>
    <script>
        //第一步：获取button按钮，然后给button添加单击事件
        const buttonObj = document.querySelector("button")
        const spanObj = document.querySelector("span")

        buttonObj.onclick = function () {
            // alert("点击了按钮,显示时间到span中")
            // alert(getCurrentDate())
            // alert(spanObj.innerText)

            //对innerText重新赋值
            spanObj.innerText = getCurrentDate()
        }

        function getCurrentDate() {
            const date = new Date();
            //组织格式
            const date1 ="现在是"+date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
            return date1
        }
    </script>
</body>

</html>